{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1"> 
        <tr>
            <th>名称</th>
            <th>大小</th>
            <th>文件路径</th>
            <th>上传时间</th>
            <th>检测</th>
            <th>结果</th>
            <th>下载</th>
        </tr>
        {% for f_info in file_infos %}
            <tr>
                <td id="name_{{forloop.counter}}">{{ f_info.file_name }}</td>
                <td>{{ f_info.file_size }} (kb)</td>
                <td> <a href="{% static ""%}{{f_info.file_name}}" id='a_path_{{forloop.counter}}' target="_blank">{{f_info.file_path}}</a> </td>
                <td>{{ f_info.upload_time }}</td>
                <td><button id="bt_dt_{{forloop.counter}}" onclick="detect({{forloop.counter}})">检测</button></td>
                <td id="td_res_{{forloop.counter}}"></td>
                <td><button id="bt_dl_{{forloop.counter}}" onclick="download({{forloop.counter}})" disabled="true">下载</button></td>
            </tr>
        {% endfor %}
    </table>
    <!--    {% for f_info in file_infos %}
        <img src="{% static ""%}{{f_info.file_name}}">
    {% endfor %}-->
    {% csrf_token %}
</body>
<script>

function httpRequest(paramObj,fun,errFun) {
	var xmlhttp = null;
	/*创建XMLHttpRequest对象，
	 *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
	 * */
	if(window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	}else if(window.ActiveXObject) {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	/*判断是否支持请求*/
	if(xmlhttp == null) {
		alert('你的浏览器不支持XMLHttp');
		return;
	}
	/*请求方式，并且转换为大写*/
	var httpType = (paramObj.type || 'GET').toUpperCase();
	/*数据类型*/
	var dataType = paramObj.dataType || 'json';
	/*请求接口*/
	var httpUrl = paramObj.httpUrl || '';
	/*是否异步请求*/
	var async = paramObj.async || true;
	/*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
	var paramData = paramObj.data || [];
	var requestData = '';
	for(var name in paramData) {
		requestData += name + '='+ paramData[name] + '&';
	}
	requestData = requestData == '' ? '' : requestData.substring(0,requestData.length - 1);
	//console.log(requestData)
	
	/*请求接收*/
	xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      /*成功回调函数*/
      fun(xmlhttp.responseText);
    }else{
    	/*失败回调函数*/
    	errFun;
    }
	}			
	
	/*接口连接，先判断连接类型是post还是get*/
	if(httpType == 'GET') {
		xmlhttp.open("GET",httpUrl,async);
	xmlhttp.send(null);
	}else if(httpType == 'POST'){
		xmlhttp.open("POST",httpUrl,async);
		//发送合适的请求头信息
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
		xmlhttp.send(requestData); 
	}
}
/*
//请求参数
var paramObj = {
	httpUrl : '',
	type : 'post',
	data : {
		name : 'sss',
		sex : '男'
	}
}
//请求调用
httpRequest(paramObj,function(respondDada) {
    //这里编写成功的回调函数
    console.log(respondDada)
},function() {
	alert('网络错误')
});
*/

    function detect(id){
        const bt_dt_id = "bt_dt_" + id;
        const bt_dl_id = "bt_dl_" + id;
        const td_res_id = "td_res_" + id;
        const file_name = document.getElementById("name_"+id).innerText;
        const file_path = document.getElementById("a_path_"+id).innerText;
        var btn_dt = document.getElementById(bt_dt_id);
        var btn_dl = document.getElementById(bt_dl_id);
        var td_res = document.getElementById(td_res_id);

        //获取csrf_token
        const csrf_token = document.getElementsByName('csrfmiddlewaretoken')[0].value;

        //构造请求参数
        const paramobj = {
            httpUrl : "http://" + window.location.host + "/uploader/detect/",
            type : 'post',
            data : {
                'csrfmiddlewaretoken' : csrf_token,
                'file_path' : file_path,
                'file_name' : file_name,
            }
        }

        //发起http post请求
        httpRequest(paramobj, function(resdata){

               if(resdata !== 'detect faild'){
                    //修改检测按钮文字
                    btn_dt.innerText = "完成";
                    //启用下载按钮
                    btn_dl.disabled = false;
                    //禁用检测按钮
                    btn_dt.disabled = true;
                    //设置检测结果
                    td_res.innerHTML = '<a href="'+ {% static "" %} + resdata + '"' + ' id="td_res_a_' + id + '"' + ' target="_blank"'  + '>' + resdata + '</a>';
 
               }
               else {alert('检测失败！')}


            
        }, function(){
            alert("网络错误");
        });


    }

    function download(id){

        const file_name = document.getElementById("name_"+id).innerText;
        const bt_dl_id = "bt_dl_" + id;
        const download_path = document.getElementById("td_res_a_" + id).innerText;
        //获取csrf_token
        const csrf_token = document.getElementsByName('csrfmiddlewaretoken')[0].value;
        const url = "http://" + window.location.host + "/uploader/download/?csrfmiddlewaretoken=" + csrf_token + "&download_path=" + download_path;
        window.open(url, "_self");
         
    }
</script>
</html>